<template>
  <div>
      <h1>当前的和为: {{sum}}</h1>
      <h3>当前值放大10倍后为：{{bigSum}}</h3>
      <h3>我在{{school}} , 学习{{subject}}</h3>
      <select v-model.number="n">
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>
      </select>
      <button class="a" @click="increment">+</button>
      <button class="a" @click="decrement">-</button>
      <button @click="incrementOdd">当前和为奇数时再加</button>
      <button @click="incrementWait">等0.6秒再加</button>
  </div>
</template>

<script>
import {mapState,mapGetters} from 'vuex'
export default {
    name:'Count',
    data(){
        return{
            n:1,
        }
    },
    computed:{
        // 我们自己写的计算属性：
        // sum(){
        //     return this.$store.state.sum
        // },
        // bigSum(){
        //     return this.$store.getters.bigSum
        // }

        // 借助mapState生成计算属性，从State中读取数据，（对象写法）
        // ...mapState({sum:'sum',school:'school',subject:'subject'}), 
        // 借助mapState生成计算属性，从State中读取数据，（数组写法）
        ...mapState(['sum','school','subject']), 
        
        // 借助mapGetters生成计算属性，从getters中读取数据，（对象写法） 
        // ...mapGetters({bigSum:'bigSum'}),
        // 借助mapGetters生成计算属性，从getters中读取数据，（数组写法） 
        ...mapGetters(['bigSum'])
    },
    methods: {
        increment(){
           this.$store.dispatch('add',this.n)
        },
        // 方法一：
        // decrement(){
        //    this.$store.dispatch('jian',this.n)
        // },
        // 方法二：
        decrement(){
           this.$store.commit('JIAN',this.n)
        },
        incrementOdd(){
            this.$store.dispatch('ji',this.n)
        },
        incrementWait(){
            this.$store.dispatch('wait',this.n)       
        }   
    },
}
</script>

<style>
.a{
    width: 50px;
}
button {
    margin-left: 5px;
}
</style>